<template>
  <div class="media-box flex"
       :class="className">
    <el-avatar shape="square"
               :size="36"
               :src="avatar"></el-avatar>

    <div class="media-box__body flex flex-col">
      <component :is="item.name"
                 v-if="item.name"
                 v-bind="item.options || {}"></component>
    </div>

  </div>
</template>

<script>

import AIComponents from '@/components/gadget/ai'


export default {
  name: 'MediaBox',
  components: {
    ...AIComponents
  },
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    className () {
      if (this.item.type === 'GPT') {
        return 'media-box--gpt'
      }
      if (this.item.type === 'SUGGESTION') {
        return 'media-box--suggestion'
      }

      return "media-box--user"
    },
    avatar () {
      if (this.item.type === 'GPT') {
        return require('@/assets/img/mspbots.png')
      }
      if (this.item.type === 'SUGGESTION') {
        return require('@/assets/img/Sparkle.png')
      }

      return this.$store.state.user.headUrl
    }
  }
}
</script>

<style lang="scss" scoped>
.media-box {
  &:not(:first-child) {
    margin-top: 16px;
  }
  &--gpt {
    .media-box__body {
      background-color: #f8f8f8;
    }

    & + .media-box--gpt {
      margin-top: 8px;
      .el-avatar {
        visibility: hidden;
      }
    }
  }
  &--suggestion {
    .media-box__body {
      padding: 0;
      border-radius: 0;
      border: 0;
    }
    & + .media-box--suggestion {
      margin-top: 8px;
      .el-avatar {
        visibility: hidden;
      }
    }
  }
  &--user {
    .media-box__body {
      background: #e0f2ff;
    }
    & + .media-box--user {
      margin-top: 8px;
      .el-avatar {
        visibility: hidden;
      }
    }
  }
  .el-avatar {
    margin-right: 12px;
    flex-shrink: 0;
    background: linear-gradient(360deg, #006ccf 0%, #0095ff 100%);
    border-radius: 4px;
  }
  &__body {
    min-width: 100px;
    max-width: 90%;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    line-height: 20px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.06);
  }
}
</style>